<div id="app" v-cloak>
    <div class="padding10 flex-row" v-if="search?.list?.length>0">
        <el-form :inline="true" :model="search.list" class="demo-form-inline">
            <el-form-item v-for="(item,index) in search.list" :label="item.lable">
                <mu-form v-model="item.value" :input-type="item.type" width="200px" :placeholder="`请输入`+item.lable"></mu-form>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </el-form-item>

        </el-form>
    </div>
    <div class="flex-row bottom10">
        <el-button @click="refresh">
            <el-icon :size="15"><Refresh /></el-icon>
        </el-button>
        <el-upload
                class="upload-demo"
                style="margin: 0px 5px"
                ref="upload"
                :action="upfile_path"
                :on-success="handleLocation"
                :show-file-list="false"
                accept="zip"
                >
            <el-button slot="trigger" size="default" type="primary">本地安装</el-button>
        </el-upload>

        <el-button type="primary" @click="handleAdd()">添加</el-button>
        <el-button type="danger" @click="event=>handleDels()" :disabled="selectables.length==0?true:false">删除</el-button>
    </div>
    <div class="flex-column flex-content-center flex-item-center">
        <el-table :data="listObj.list"
                  style="width: 100%"
                  :border="true"
                  :max-height="search?.list?.length>0?530:600"
                  size="default"
                  @selection-change="event=>handleSelectionChange(event)"
                  :show-overflow-tooltip="true"
                  row-key="id"
        >
            <el-table-column fixed="left" type="selection" :selectable="selectable" width="55" ></el-table-column>
            <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
            <el-table-column prop="title" label="名称" min-width="150"  align="center"></el-table-column>
            <el-table-column prop="key" label="包名称" min-width="150"  align="center"></el-table-column>
            <el-table-column prop="description" label="简介" min-width="100" align="center"></el-table-column>
            <el-table-column prop="require" label="依赖应用" min-width="100" align="center"></el-table-column>
            <el-table-column prop="version" label="应用版本" min-width="100" align="center"></el-table-column>
            <el-table-column prop="createtime" label="创建时间" min-width="200" align="center"></el-table-column>
            <el-table-column label="状态" min-width="100" align="center">
                <template #default="scope">
                    <el-switch
                            v-model="scope.row.status"
                            size="default"
                            :active-value="1"
                            :inactive-value="0"
                            @change="event=>handleSwitchChange(scope.row,`status`)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button size="small"  type="danger" @click="handleDelete(scope.row)">卸载</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="flex-row top20 flex-content-end" v-if="!(search?.form?.list_type&&search.form.list_type==`tree`)">
        <el-pagination
                background
                layout="total,sizes,prev, pager, next,jumper"
                :total="listObj.total"
                :page-size="listObj.limit"
                :page-sizes="[10, 20, 50, 100,500,1000]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</div>